<template>
  <div>
    <el-drawer title="选择店铺" :visible.sync="drawer" size="40%">
      <el-table
        :data="brandChannelShopList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="品牌" align="center" prop="brand" />
        <el-table-column label="渠道" align="center" prop="channel" />
        <el-table-column label="店铺名称" align="center" prop="shopName" />
      </el-table>
      <div class="footer" style="margin-top: 100px; text-align: center">
        <el-button size="small" type="primary" plain @click="handleSave"
          >保存配置</el-button
        >
      </div>
    </el-drawer>
    <el-form :model="form" ref="performanceForm" label-width="100px">
      <el-row>
        <h3>1、选择员工</h3>
        <el-form-item label="">
          <el-button type="primary" @click="drawer = true">选择店铺</el-button>
          <el-row>
            <span
              >已选：<el-tag v-for="(item, index) in shopList" :key="index">{{
                item
              }}</el-tag></span
            >
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <h3>2、设置业绩目标</h3>
        <el-row>
          <el-form-item label="">
            <el-input-number v-model="targetAll"></el-input-number>
            <el-button type="primary" @click="handletargetAll"
              >批量填充</el-button
            >
          </el-form-item>
        </el-row>

        <el-col :span="5">
          <el-card>
            <div slot="header">
              <span>第一季度: {{ quarters[0].total }}</span>
            </div>
            <el-form-item
              v-for="(month, index) in form.months.slice(0, 3)"
              :key="index"
              :label="`${index + 1}月（元）`"
            >
              <el-input-number
                v-model="month.target"
                :min="0"
                @change="calculateQuartersAndYear"
              ></el-input-number>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="1" class="center">
          <span>➕</span>
        </el-col>
        <el-col :span="5">
          <el-card>
            <div slot="header">
              <span>第二季度: {{ quarters[1].total }}</span>
            </div>
            <el-form-item
              v-for="(month, index) in form.months.slice(3, 6)"
              :key="index"
              :label="`${index + 1}月（元）`"
            >
              <el-input-number
                v-model="month.target"
                :min="0"
                @change="calculateQuartersAndYear"
              ></el-input-number>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="1" class="center"> ➕ </el-col>
        <el-col :span="5">
          <el-card>
            <div slot="header">
              <span>第三季度: {{ quarters[2].total }}</span>
            </div>
            <el-form-item
              v-for="(month, index) in form.months.slice(6, 9)"
              :key="index"
              :label="`${index + 1}月（元）`"
            >
              <el-input-number
                v-model="month.target"
                :min="0"
                @change="calculateQuartersAndYear"
              ></el-input-number>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="1" class="center"> ➕ </el-col>
        <el-col :span="5">
          <el-card>
            <div slot="header">
              <span>第四季度: {{ quarters[3].total }}</span>
            </div>
            <el-form-item
              v-for="(month, index) in form.months.slice(9, 12)"
              :key="index"
              :label="`${index + 1}月（元）`"
            >
              <el-input-number
                v-model="month.target"
                :min="0"
                @change="calculateQuartersAndYear"
              ></el-input-number>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <!-- 月份业绩目标设置 -->
      <!-- <el-form-item
      v-for="(month, index) in form.months"
      :key="index"
      :label="`${index + 1}月（元）`"
    >
      <el-input-number
        v-model="month.target"
        :min="0"
        @change="calculateQuartersAndYear"
      ></el-input-number>
    </el-form-item> -->

      <!-- 季度业绩目标显示 -->
      <!-- <div>
      
      <div v-for="(quarter, index) in quarters" :key="index">
        <span>第{{ index + 1 }}季度: {{ quarter.total }}</span>
      </div>
    </div>
    -->

      <!-- 业绩目标一年总和 -->
      <!-- <el-form-item label="单个员工全年业绩目标(2024年)">
        <span>{{ totalYear }}</span>
      </el-form-item> -->
      <h3>3、单个员工全年业绩目标:{{ totalYear }}(元)</h3>
      <!-- 提交按钮 -->
      <!-- <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item> -->
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="margin-top: 50px; text-align: center"
    >
      <el-button type="primary" @click="submitForm">提交</el-button>
      <!-- <el-button @click="canNew">取 消</el-button> -->
      <!-- <el-button @click="addDomain">新增</el-button> -->
    </div>
  </div>
</template>  
  
<script>
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
export default {
  data() {
    return {
      shopList: [],
      list: [],
      brandChannelShopList: [],
      targetAll: "",
      drawer: false,
      form: {
        months: Array.from({ length: 12 }, (_, i) => ({ target: 0 })), // 初始化12个月的业绩目标为0
      },
      quarters: [], // 存储季度业绩目标的数组
      totalYear: 0, // 业绩目标一年总和
    };
  },
  watch: {
    // 监听form.months的变化来重新计算季度和年总和
    "form.months": {
      handler() {
        this.calculateQuartersAndYear();
      },
      deep: true, // 深度监听
    },
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.list = selection.map((item) => item);
    },
    handleSave() {
      this.shopList = [];
      this.list.forEach((item) => {
        this.shopList.push(item.shopName);
      });
      this.drawer = false;
    },
    handletargetAll() {
      console.log(JSON.stringify(this.form.months));
      this.form.months.forEach((item) => {
        item.target = this.targetAll;
      });
      console.log(JSON.stringify(this.form.months));
      // this.calculateQuartersAndYear();
    },
    // 计算季度和年总和
    calculateQuartersAndYear() {
      // 重置季度数组和年总和
      this.quarters = Array.from({ length: 4 }, () => ({ total: 0 }));
      this.totalYear = 0;

      // 计算每个季度的总和
      for (let i = 0; i < this.form.months.length; i++) {
        const monthIndex = Math.floor(i / 3); // 计算月份对应的季度索引
        this.quarters[monthIndex].total += this.form.months[i].target;
        this.totalYear += this.form.months[i].target; // 累加月份到年总和
      }
    },
    // 提交表单
    submitForm() {
      // 在这里添加保存逻辑，比如发送请求到服务器
      console.log("提交业绩目标:", this.form);
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        this.brandChannelShopList = response;
      });
    },
  },
  mounted() {
    // 初始化时也可以计算一次季度和年总和（如果必要的话）
    this.calculateQuartersAndYear();
    this.getdataSourceList();
  },
};
</script>  
  
<style scoped>
/* 在这里添加你的样式 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 260px;
}
</style>